import React from "react"
import { Text, View } from "@tarojs/components"
import GpInstitutionItemPure, { IProps as PureProps } from "@/components/GpInstitutionItemPure"
import clsx from "clsx"
import styles from "./index.module.scss"
import GpIcon from "@/components/GpFontIcon"

type IProps = {
  className?: string
  shadow?: boolean
  pureProps: PureProps
  ranking?: {
    /** 排名，从0开始 */
    level: number
    levelText: string
  }
  brandTagline?: string
}

const GpInstitutionItem: React.FC<IProps> = (props: IProps) => {
  const { className, shadow = false, pureProps, ranking, brandTagline } = props
  let rankingCls = "normal"
  if (ranking) {
    if (ranking.level === 0) {
      rankingCls = "first"
    } else if (ranking.level === 1) {
      rankingCls = "sencond"
    } else if (ranking.level === 2) {
      rankingCls = "third"
    }
  }
  return (
    <View
      className={clsx(
        "pb-40px",
        styles["item"],
        {
          [styles["shadow"]]: shadow
        },
        className
      )}
    >
      {/* 上部分 */}
      <View className={styles["item-top"]}>
        <GpInstitutionItemPure {...pureProps} />
      </View>
      {/* 下部分 */}
      {/* <Text className="yahei font-normal text-24px text-hex-999 pt-19px pb-24px">
        培训项目：{pureProps.institution.projects?.join(" | ")}
      </Text> */}
      {brandTagline && (
        <View className={styles["item-brandTagLine"]}>
          <GpIcon
            icon="icon-dianzanxiankuang"
            size={23}
            color="#FC6B1C"
            styles={{ float: "left", marginRight: "3px" }}
          ></GpIcon>
          <Text className={styles["item-brandTagLine-text"]}>推荐理由：{brandTagline}</Text>
        </View>
      )}
      {ranking && (
        <View className={clsx(styles["ranking"], styles[rankingCls])}>{ranking.levelText}</View>
      )}
    </View>
  )
}
export default GpInstitutionItem
